import React, { useState } from "react";
import { MyNavBar } from "../../../components";
import style from "./style.module.scss"
import { Input, Toast } from "react-vant";
import commonIconCloseGrey from "../../../assets/images/icon/common resource/hdpi/common_icon_close_grey_n.png"
import { useNavigate } from "react-router-dom";
import { useAppSelector } from "../../../store/hooks";
import { updateNickName } from "../../../api/my";


const Index: React.FC = () => {

  const navigate = useNavigate()

  const [nickName, setNickName] = useState('')
  const [flag, setFlag] = useState(false)

  const userInfo = useAppSelector((state) => {
    return state.user.userInfo;
  });

  const onUpdate = async () => {
    const resp = await updateNickName(nickName, userInfo.userId, userInfo.sessionId);

    if (resp.status === '0000') {
      setFlag(false)
      window.history.back()
    }
  }

  return <div className={style.setNickname}>
    <MyNavBar
      title="设置昵称"
      onClickLeft={() => navigate('/set/person/infomation')}
      rightText={
        <button
          className={style.btn}
          onClick={() => setFlag(true)}
        >完成</button>
      }
      style={{ backgroundColor: "#fff" }}
    ></MyNavBar >
    <div className={style.input_box}>
      <Input placeholder={userInfo.nickName} value={nickName} onChange={value => setNickName(value)} />
      <img src={commonIconCloseGrey} alt="" onClick={() => setNickName("")} />
    </div>
    {/* 弹出框 */}
    {
      flag && <div className={style.dialog}>
        <div className={style.dialog_box}>
          <div className={style.message}>
            您的信息将会被更改！
          </div>
          <div className={style.footer_button}>
            <div className={style.cancel} onClick={() => setFlag(false)}>取消</div>
            <div className={style.verify} onClick={() => onUpdate()}>确认</div>
          </div>
        </div>
      </div>
    }
  </div >;
};

export default Index;
